<template>
  <div class=''>
    完成的数量：{{leftCount}}
    <ul>
      <li v-for="item in todos" :key="item.id">{{item.content}}, {{item.isDone}}</li>
    </ul>

  </div>
</template>

<script setup lang="ts">import { computed, ref } from 'vue';
  const num = ref<number>(100)
  // const t = [{id:1, content: '吃饭', isDone: true},{id:2, content: '睡觉', isDone: true}]
  // todos
  // const todos = ref([{id:1, content: '吃饭', isDone: true},{id:2, content: '睡觉', isDone: true}])
  // const todos = ref([])
  // ref<泛型>()
  // ref<{id: number}[]>()  // const arr: number[] = [1,2,3]
  const todos = ref<{
      id: number;
      content: string;
      isDone: boolean;
  }[]>([])


  // 计算属性，已完成的数量
  const leftCount = computed<number>(()=>{
    return todos.value.filter(item => item.isDone).length
  })

  setTimeout(() => {
    todos.value = [{id:1, content: '吃饭', isDone: false},{id:2, content: '睡觉', isDone: true}]
  }, 1000)
</script>
